<template>
  <div class="main-layout">
    <div class="main-top-lay" >
      <Header style="flex:1;" :headHei='68'
              :title="systemTitle"
              :logo="logo" :user="userInfo" ref="headerRef"/>
    </div>
    <div class="main-content" >
      <LeftNav ref="refLeftNav" style="height: 100%; " :active-menu="activeMenu"
               :click-menu="clickMenu" :menus="menus" />
      <div class="main-router-lay" ref="refContent" >
        <div class="main-router">
          <LeftMenu :menus="subMenus" style="width: 150px;" :name="rootName" v-if="subMenus && subMenus.length > 0" />
          <TabRouterLayout style="flex: 1;" :style="{'width': routerWid + 'px'}" @tab-router-change="tabRouterChange" />
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import router from "@/router";
import {useStore} from "@/stores";
import {computed, nextTick, onMounted, ref, shallowRef, toRaw} from "vue";

import Header from "@/components/common/PageHeader.vue";
import LeftMenu from "@/components/common/LeftMenu.vue";
import LeftNav from "@/components/common/PageLeftNav.vue";
import TabRouterLayout from "@/views/layouts/TabRouterLayout.vue";
import {VAR_TAG} from "@/stores/conf";

const store = useStore();

const prefix = ref('');
const rootName = ref('');

const logo = ref(store.settings.logo);
const systemTitle = shallowRef(store.settings.title);

const refLeftNav = ref();
const headerRef = shallowRef(null);
const subMenus = ref<MenuType[]>([]);
const menus = ref<MenuType[]>(store.getTopMenus() || []);
const activeMenu = ref(store.getHomeRoute());
const refContent = ref();
let observer: ResizeObserver | null = null;
const routerWid = ref(0);

const userInfo = computed(() => {
  return  store.getUser();
});

const doClickMenu = (key: string, loadMenu: boolean) => {
  const path: string = key.replace(VAR_TAG, '');
  const result = store.updateTopFirstRoute(path);

  prefix.value = '/' + result.name;
  rootName.value = result.name;

  if (loadMenu || prefix.value != activeMenu.value) {
    subMenus.value = [];
  }

  if (result.path) {
    nextTick(async () => {
      if (loadMenu || prefix.value != activeMenu.value) {
        subMenus.value = toRaw(store.getSubMenus(prefix.value)) || [];
      }
      await router.push({path: result.path});
      await nextTick(() => {
        store.updateActiveMenu(result.name, result.path);
      })
    })
  } else {
    router.push({path: path});
  }
}

const clickMenu = (key: string) => {
  doClickMenu(key, true)
}

const tabRouterChange = async (active: string) => {
  const pos: number = active.substring(2).indexOf('/');
  const rootPath: string = -1 == pos ? active : active.substring(0, pos + 2);

  if (rootPath != activeMenu.value) {
    subMenus.value = [];
    activeMenu.value = rootPath;
    refLeftNav.value?.updateActiveMenu(rootPath);
    doClickMenu(active, true)
  } else {
    doClickMenu(active, false)
  }
}

const handleResize = (entries: any) => {
  for (const entry of entries) {
    const {width} = entry.contentRect;
    const wid: number = width - 150;
    if (routerWid.value !== wid) {
      routerWid.value = wid;
    }
  }
}

onMounted(() => {
  if (refContent.value) {
    observer = new ResizeObserver(handleResize);
    observer.observe(refContent.value);
  }
})

</script>

<style scoped>
.main-layout {
  height: 100vh;
  width: 100vw;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.main-top-lay {
  width: 100%;
  display: flex;
  flex-direction: row;
}

.main-content {
  display: flex;
  flex-direction: row;
  flex: 1;
  overflow: hidden;
}

.main-router-lay {
  display: flex;
  flex-direction: column;
  flex: 1;
  background-color: #f5f5f5;
  overflow: hidden;
}

.main-router {
  flex: 1;
  display: flex;
  flex-direction: row;
  overflow: hidden;
}

</style>
